/* Copyright 2021 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

.mode-subgroup {
  background: var(--cros-sys-base_elevated);
  border-radius: var(--border-radius-rounded-with-short-side);
  bottom: calc(var(--bottom-line) * 2 + 8px);
  color: var(--cros-sys-on_surface);
  display: flex;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.mode-subgroup > .item {
  border-radius: var(--border-radius-rounded-with-short-side);
  pointer-events: auto;
  position: relative;
}

.mode-subgroup > .item > input {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.mode-subgroup > .item > input[type=radio] {
  border-radius: var(--border-radius-rounded-with-short-side);
}

.mode-subgroup > .item > div.label {
  border-radius: var(--border-radius-rounded-with-short-side);
  font: 500 14px/20px var(--default-font-family);
  line-height: 20px;
  padding: 6px 16px;
  z-index: 0;
}

.mode-subgroup > .item input:checked + div.label {
  background: var(--cros-sys-primary);
  color: var(--cros-sys-inverse_on_surface);
}
